<template>
    <div>
        <div class="hen">
            <el-row class="hengfu">
                <el-col :span="12">
                    <el-page-header @back="goBack">
                        <template #content>
                            <el-breadcrumb-item :to="{ path: '/exam/question' }">题库管理</el-breadcrumb-item>
                        </template>
                    </el-page-header>
                </el-col>
            </el-row>
        </div>

        <div class="tab">
            <div class="grid-content">
                <el-row>
                    <el-col :span="3">
                        <div>
                            <el-button color="#626aef" size="large" type="primary" plain
                                @click="AddQuestion">新增题库</el-button>
                        </div>
                    </el-col>
                    <el-col :span="21">
                        <div class="flex">
                            <el-tag size="large" class="ml-2" type="warning">tips:如果要新增试题,请在【默认题库/新增/导入】！</el-tag>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div class="trr">
                <el-table v-loading="loading" :data="tableData" height="58vh" max-height="58vh" border style="width: 100%">
                    <el-table-column prop="name" label="题库" width="180" />
                    <el-table-column prop="count" label="题目数量" width="180" />
                    <el-table-column prop="lv" label="难度" />
                    <el-table-column prop="labels" label="标签" />
                    <el-table-column prop="isPublish" label="发布">
                        <template #default="scope">
                            <el-tag class="ml-2" :type="scope.row.isPublish == 0 ? 'danger' : 'success'">{{
                                scope.row.isPublish == 0 ? '否' : '是' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isBan" label="禁用">
                        <template #default="scope">
                            <el-tag class="ml-2" :type="scope.row.isBan == 0 ? 'success' : 'danger'">{{ scope.row.isBan == 0
                                ? '否' : '是' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="280">
                        <template #default="scope">
                            <el-button @click="Questions(scope.row)" color="#626aef" plain size="small">试题
                            </el-button>
                            <el-button v-if="scope.row.name != '默认题库'" type="primary" plain size="small"
                                @click="detailed(scope.row)">详细
                            </el-button>
                            <template v-if="scope.row.isPublish == 0">
                                <el-button type="success" plain size="small" @click="PublishQuestionBanks(scope.row)">发布
                                </el-button>
                                <el-button type="danger" plain size="small" @click="del(scope.row)">删除
                                </el-button>
                            </template>
                            <template v-else-if="scope.row.isPublish == 1">
                                <el-button v-if="scope.row.name != '默认题库'" @click="Cancel(scope.row)" type="info" plain
                                    size="small">取消
                                </el-button>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="example-pagination-block" style="margin-top: 1vh;">
                    <el-pagination @current-change="changes" :page-size="limit" :current-page="page"
                        layout="prev, pager, next" :total="index" />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import type { TypequestionDto } from '../../../type/question'
import { computed, defineComponent, onMounted, reactive, toRefs } from 'vue'
import { GetQuestionBanks, GetQuestionsCount, PublishQuestionBanks, DeleteQuestionBanks } from '../../../api/question/question'
import { useStore } from 'vuex';
import { ElLoading, ElNotification } from 'element-plus'
import { useRouter } from 'vue-router';


export default defineComponent({
    setup() {
        const store = useStore();
        const router = useRouter();

        const data = reactive<TypequestionDto>({
            tableData: [],  // 表格数据
            page: 1,        // 第几页 
            limit: 10,       // 多少条数据
            key: '',        // 题库查询条件 
            isBan: -1,      // 禁用 
            isPublish: -1,  // 发布 
            index: 0,       // 多少条数据 
            countss: 0,      // 默认题库数量 
            loading: true   // 加载屏 
        })

        const computeds = {
            // 在 computed 函数中访问 state
            data: computed(() => store.state.question.data),
        }

        const events = {
            goBack() {
                window.history.go(-1)
            },

            // page 改变时触发
            changes(val: any) {
                data.loading = true
                data.page = val
                events.bind()
            },

            // 新增题库
            AddQuestion() {
                router.push('/exam/question/addbank')
            },

            // 试题
            Questions(val: any) {
                router.push({ path: `/exam/question/index/${val.id}` })
            },

            // 删除
            del(val: any) {
                data.loading = true
                DeleteQuestionBanks({
                    ids: [val.id]
                }).then((res: any) => {
                    if (res.result == 0) {
                        events.bind()
                        ElNotification({
                            title: '删除成功',
                            type: 'success',
                        })
                    } else {
                        events.bind()
                        ElNotification({
                            title: '删除失败',
                            message: res.message,
                            type: 'warning',
                        })
                    }
                })
                console.log(val)
            },

            // 详细
            detailed(val: any) { 
                router.push({ path: `/exam/question/detailBank/${val.id}` })
            },

            // 发布
            PublishQuestionBanks(val: any) {
                events.Publish(val.isPublish = 1, val.id)
            },
            // 取消
            Cancel(val: any) {
                events.Publish(val.isPublish = 0, val.id)
            },

            // 
            Publish(isPublish: number, ids: any) {
                data.loading = true
                PublishQuestionBanks({
                    ids: [ids],
                    isPublish: isPublish
                }).then((res: any) => {
                    if (res.result == 0) {
                        events.bind()
                        ElNotification({
                            title: '操作成功',
                            type: 'success',
                        })

                    } else {
                        events.bind()
                        ElNotification({
                            title: '操作失败',
                            message: res.message,
                            type: 'warning',
                        })
                    }
                })
            },

            //获取题目数量
            Count() {
                GetQuestionsCount({}).then((res: any) => {
                    if (res.result == 0) {
                        data.countss = res.data
                    }
                })
            },

            //查询题目
            bind() {
                GetQuestionBanks({
                    page: data.page,
                    limit: data.limit,
                    key: data.key,
                    isBan: data.isBan,
                    isPublish: data.isPublish
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.loading = false
                        data.tableData = res.data.data
                        data.tableData.unshift({
                            count: data.countss,
                            createTime: "2022-11-28 11点",
                            explain: null,
                            id: -1,
                            isBan: 0,
                            isPublish: 5,
                            labels: "JAVA,NET",
                            lv: 1,
                            name: "默认题库"
                        })
                        data.index = res.data.total
                    }
                })
            }

        }

        onMounted(() => {
            events.bind()
            events.Count()
        })

        return {
            ...toRefs(data),
            ...computeds,
            ...events
        }

    },
})
</script>

<style scoped>
/* 背景 */
.tab {
    margin-top: 2vh;
    height: 75vh;
    /* background-color: rgb(239, 240, 242); */
    /* border: 1px solid darkgray; */
    /* box-shadow: 0px 0px 2px rgb(188, 185, 185); */
    border-radius: 5px;
    overflow: hidden;
}

/* 按钮样式 */
.grid-content {
    margin: auto;
    /* margin-top: 2vh; */
    border-radius: 5px;
    background-color: rgb(251, 251, 251);
    width: 98%;
    line-height: 45px;
    text-align: left;
    padding: 10px;
    border: 1px solid darkgray;
    box-shadow: 0px 0px 1px grey;
}

.flex {
    float: right;
    /* margin-right: 2vh; */
}

.trr {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    padding: 1vh;
    width: 98%;
    background-color: rgb(251, 251, 251);;
    border: 1px solid darkgray;
    box-shadow: 0px 0px 1px grey;
}
</style>
